A jQuery lightbox plugin built on HTML5. It uses the HTML5 data attribute to add a larger version of an image then displays that image in a simple modal lightbox.
- Add jQuery (at least 1.7) and the plugin to your page.
- Add a
data-large-srcattribute to the<img>element with the url of the larger version of your image. - Add the jQuery call to run the plugin on your images.
- Click and enjoy.
<img src="http://placekitten.com/200/300" alt="kitteh!"
width="200" height="300"
data-large-src="http://placekitten.com/400/600" />
<script>
jQuery(function ($) {
$("img").h5lightbox();
});
</script>
The plugin will go through each img element on the page; if it has the data-large-src (or your own defined attribute) it will wrap that in a link that opens a modal lightbox when clicked.
This plugin is licensed under MIT. Have at it.